<template>
  <div
    class="template-main"
    :style="mainPage.rootNode.style"
  >
    <div
      v-for="(item, index) in mainPage.rootNode.children"
      :key="index"
      class="page-item"
    >
      <div v-if="item.type==1">
        <list-node
          :mode="item.mode"
          :data="item.children"
          :style="item.style"
          @clickItem="itemClick"
        ></list-node>
      </div>
      <div v-else-if="item.type==2">
        <single-node
          :mode="item.mode"
          :data="item"
          :style="item.style"
          @clickItem="itemClick"
        ></single-node>
      </div>
      <div
        v-else
        :style="item.style"
      >
        <div
          v-for="(item2, index2) in item.children"
          :key="index2"
          :style="item2.style"
        >
          <div>{{item2.title}}</div>
          <div>{{item2.description}}</div>
          <div>{{item2.toUrl}}</div>
          <div>{{item2.picUrl}}</div>
        </div>
      </div>
    </div>
    <!-- <a-button @click="test">主题字段获取</a-button> -->
  </div>
</template>

<script>
import store from '@/store/index.js'
import { contentSettings } from "@/assets/js/contentSettings.js"
import ListNode from '@/components/TemplateNode/ListNode/ListNode'
import SingleNode from '@/components/TemplateNode/SingleNode/SingleNode'

// import smoothscroll from 'smoothscroll-polyfill'
export default {
  components:{
    // PicsNode,
    // DocsNode,
    ListNode,
    SingleNode
  },
  setup(){
    const onChange = current => {
      // console.log(current);
    };
    // const mainPage = store.state.defaultSettings.mainPage;
    const mainPage = contentSettings.getData()?.mainPage;
    return{
      onChange,
      mainPage,
      scrollHeight:0
    }
  },
  data(){
    return{
      store
    }
  },
  mounted(){
    const setScrollTo = (e)=>{
      // console.info("e:",e)
      const offsetHeight = document.documentElement.offsetHeight;
      const scrollHeight = document.documentElement.scrollHeight;
      let de = this.scrollHeight % offsetHeight;
      if(de>0 && e.deltaY<0){
        this.scrollHeight -= de;
      }
      this.scrollHeight = this.scrollHeight + ( ((e.deltaY>0) ? 1: -1)* offsetHeight);
      if(this.scrollHeight >= scrollHeight) this.scrollHeight = scrollHeight;
      if(this.scrollHeight <= 0) this.scrollHeight = 0;

      // window.scrollTo({top: this.scrollHeight})
      window.scrollTo({top: this.scrollHeight, behavior: "smooth"})
      // console.info("this.scrollHeight:", this.scrollHeight)
      // if(e.deltaY>0){
      //   // window.scrollByPages(1);//非标准方法，很多浏览器不支持
      //   window.scrollBy({top: offsetHeight})
      // }
      // else{
      //   // window.scrollByPages(-1);
      //   window.scrollBy({top: -offsetHeight})
      // }
    }
    // 解决移动端 scrollTo 的 behavior: "smooth" 无效的问题
    // smoothscroll.polyfill()
    
    //滚轮
    document.documentElement.querySelector(".template-main").onwheel = (e)=>{
      setScrollTo(e);
      //需要屏蔽原有的事件，不然事件会叠加，导致出现意外效果（比如滚动距离超长、behavior无效等）
      return false
    }
    //屏幕滑动
    var touchStartY = 0;
    document.documentElement.querySelector(".template-main").addEventListener('touchstart', e=>{
      touchStartY = e.touches[0].pageY;
      return false
    })
    document.documentElement.querySelector(".template-main").addEventListener('touchend', e=>{
      // console.info('e:',e)
      var touchEndY = e.changedTouches[0].pageY;
      if(touchEndY > touchStartY) e.deltaY = -1;
      else e.deltaY = 1;
      setScrollTo(e)
      return false
    })
    
  },
  methods:{
    test(){
      let theme = store.state.defaultSettings.themeModifyVars;
      console.info("theme",theme)
    },
    onClick(child){
      window.open(child.toUrl,'_blank');
    },
    itemClick(item){
      if(item.openType==0){
        //直接get打开源文件
        window.open(item.toUrl,'_blank');
      }
      else if(item.openType==1){
        //内置md阅读器打开文件
        let urlPath = ('.' + encodeURIComponent(item.toUrl));
        const {href} = this.$router.resolve({ path: 'documents', query: { docpath: urlPath, doctype:1 } })
        window.open(href,'_blank');
      }
      else if(item.openType==2){
        //内置html阅读器打开文件
        let urlPath = ('.' + encodeURIComponent(item.toUrl));
        const {href} = this.$router.resolve({ path: 'documents', query: { docpath: urlPath, doctype:2 } })
        window.open(href,'_blank');
      }
      else{
        //直接get打开源文件
        window.open(item.toUrl,'_blank');
      }
    }
  }
}
</script>

<style lang='less'>
/* @import url("/public/styles/antd.theme.less"); */
// @import "/public/styles/antd.theme.less";
.template-main {
  width: 99vw;
}
p {
  /* color: @primary-color; */
  /* color: colorPaletteMixin(); */
  color: v-bind("store.state.defaultSettings.themeModifyVars.primaryColor");
}
</style>